<template>
    <div class="b-nav b-form">
        <i-form>
            <i-form-item label="显示方式：">
                <i-radio-group v-model="styleValue">
                    <i-radio
                        v-for="(item, index) in data.showStyle"
                        :key="index"
                        :label="item">
                    </i-radio>
                </i-radio-group>
            </i-form-item>
            <i-form-item label="图片：">
                <i-checkbox v-model="showIcon">显示</i-checkbox>
            </i-form-item>
            <i-form-item label="样式：">
                <i-checkbox-group v-model="styleListValue">
                    <i-checkbox
                        v-for="(item, index) in data.showStyleList"
                        :key="index"
                        :label="item">
                    </i-checkbox>
                </i-checkbox-group>
            </i-form-item>
            <i-form-item label="列数：">
                <i-radio-group v-model="numberValue">
                    <i-radio
                        v-for="(item, index) in data.showNumber"
                        :key="index"
                        :label="item">
                    </i-radio>
                </i-radio-group>
            </i-form-item>
            <i-form-item label="描述：">
                <i-checkbox v-model="showDesc">显示</i-checkbox>
            </i-form-item>
            <i-form-item label=" ">
                <p class="prompt">图片建议尺寸：宽度72px，高度保持一致，大小不超过200kb，<strong>可拖拽排序</strong></p>
            </i-form-item>
            <draggable v-model="list">
                <url-input
                    v-for="(item, index) in list"
                    :key="index"
                    :modules-index="modulesIndex"
                    :list-index="index">
                    <edit-img
                        :modules-index="modulesIndex"
                        :list-index="index"
                        :src="item.img"
                        slot="left">
                    </edit-img>
                </url-input>
            </draggable>
            <i-button
                style="width: 100%;"
                type="ghost"
                v-if="data.list.length < 10"
                @click="addList">增加一个广告位</i-button>
        </i-form>
    </div>
</template>

<script>
// mapActions
import { mapActions } from 'vuex'

// mixins update attr
import UpdateAttr from '@/admin/mixins/update-attr'

// localData
import localData from './data/local'

// viusal component element
import { EditImg, UrlInput } from '@/admin/components'

// draggable
import Draggable from 'vuedraggable'

export default {
    name: 'b-nav',
    props: ['onlineData', 'modulesIndex'],
    mixins: [UpdateAttr],
    components: {
        EditImg,
        UrlInput,
        Draggable
    },
    data() {
        return {
            componentName: localData.componentName,
            limit: 10
        }
    },
    computed: {
        list: {
            get() {
                return this.data.list
            },
            set(value) {
                this.sortList({
                    index: this.modulesIndex,
                    list: value
                })
            }
        },
        /**
         * 样式
         */
        styleValue: {
            get() {
                return this.data.styleValue
            },
            set(value) {
                this._updateDataAttr({
                    belong: 'data',
                    attrName: 'styleValue',
                    value
                })
            }
        },
        /**
         * 整体样式
         */
        styleListValue: {
            get() {
                return this.data.styleListValue
            },
            set(value) {
                this._updateDataAttr({
                    belong: 'data',
                    attrName: 'styleListValue',
                    value
                })
            }
        },
        /**
         * 显示的列数
         */
        numberValue: {
            get() {
                return this.data.numberValue
            },
            set(value) {
                this._updateDataAttr({
                    belong: 'data',
                    attrName: 'numberValue',
                    value
                })
            }
        },
        /**
         * 是否显示图片
         */
        showIcon: {
            get() {
                return this.data.allValue.showIcon
            },
            set(value) {
                this._updateDataAttr({
                    attrName: 'showIcon',
                    value
                })
            }
        },
        /**
         * 显示描述
         */
        showDesc: {
            get() {
                return this.data.allValue.showDesc
            },
            set(value) {
                this._updateDataAttr({
                    attrName: 'showDesc',
                    value
                })
            }
        },
        data() {
            return Object.assign({}, localData.data, this.onlineData)
        }
    },
    methods: {
        ...mapActions('viusal', ['updateDataAttr', 'sortList']),
        ...mapActions(['isModal']),
        addList() {
            this.isModal({
                bShow: true,
                modalKey: 'bPictureModal',
                limit: this.limit - this.data.list.length,
                changeInfo: {
                    page: 'viusal',
                    type: 'addList',
                    attr: 'list',
                    modulesIndex: this.modulesIndex
                }
            })
        }
    }
}
</script>

<style scoped>

</style>